import React from 'react'
import {
  Image, ImageRequireSource, Text, View,
} from 'react-native'
import Navigation, { RouterKey } from '@NAVIGATION/Navigation'
import { useAppSelector } from '@REDUX/store'
import EStyleSheet from 'react-native-extended-stylesheet'
import Images from '@IMAGE'
import DBConfig from '@CONFIG/DBConfig'
import Button from '@COMPONENTS/button/Button'
import Toast from '@COMPONENTS/Toast'
import AnalyticsUtil, { ANALYTICS_EVENT } from '@UTILS/AnalyticsUtil'

interface BtnConfig {
  source: ImageRequireSource
  text: string
  routerKey?: RouterKey
  params: Record<string, any>,
  buryId: string
}
const arr : Array<BtnConfig> = [
  {
    source: Images.me.use,
    text: '如何使用',
    routerKey: RouterKey.DeviceGuide,
    params: {},
    buryId: ANALYTICS_EVENT.tap_me_howToUse.eventId,
  },
  {
    source: Images.me.faq,
    text: '常见问题',
    routerKey: RouterKey.WebView,
    params: { url: DBConfig.faqLink },
    buryId: ANALYTICS_EVENT.tap_me_commonProblem.eventId,
  },
  {
    source: Images.me.privacyAgreement,
    text: '隐私政策',
    params: {},
    buryId: ANALYTICS_EVENT.tap_me_privacyPolicy.eventId,
  },
  {
    source: Images.me.agreement,
    text: '用户协议',
    params: {},
    buryId: ANALYTICS_EVENT.tap_me_userAgreement.eventId,
  },
  {
    source: Images.me.aboutUs,
    text: '关于我们',
    routerKey: RouterKey.AboutUs,
    params: {},
    buryId: ANALYTICS_EVENT.tap_me_aboutUs.eventId,
  },
]

const Me: React.FC = () => {
  const { user } = useAppSelector((state) => state.user)
  const { NickName } = user
  const onSetting = () => Navigation.push(RouterKey.Setting)

  const onPress = (p: BtnConfig) => {
    const params = Object.assign({}, p.params, { title: p.text })
    AnalyticsUtil.onEvent(p.buryId)
    if (!p.routerKey) {
      // TODO
      Toast.info('开发中...')
      return
    }
    // @ts-ignore
    Navigation.push(p.routerKey, params)
  }

  return (
    <View style={styles.page}>
      <View style={styles.avatar}>
        <Image source={Images.me.avatar} />
        <Text style={styles.nickName}>{NickName?.en}</Text>
        <Button onPress={onSetting}>
          <Image source={Images.me.setting} />
        </Button>
      </View>
      {arr.map((v) => {
        return (
          <Button onPress={() => onPress(v)} style={styles.item} key={v.text}>
            <Image source={v.source} />
            <Text style={styles.text}>{v.text}</Text>
            <Image source={Images.me.rightArrow} />
          </Button>
        )
      })}
    </View>
  )
}

export default Me

const styles = EStyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '$bgColor',
  },
  avatar: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: 20,
    marginBottom: 10,
  },
  nickName: {
    fontSize: 18,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333333',
    lineHeight: 25,
    marginLeft: -20,
    flex: 1,
  },
  item: {
    flexDirection: 'row',
    paddingVertical: 18,
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333333',
    flex: 1,
    paddingLeft: 12,
  },
})
